<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>行内元素与块级元素</title>
    </head>
    <body>
        <!-- 块级元素，特点：独占一行 -->
        <!-- <marquee behavior="" direction="">尚硅谷</marquee>
        <marquee behavior="" direction="">尚硅谷</marquee>
        <h1>尚硅谷</h1>
        <h1>尚硅谷</h1>
        <p>尚硅谷</p>
        <p>尚硅谷</p>
        <div>尚硅谷</div>
        <div>尚硅谷</div> -->

        <!-- 行内元素 特点：不独占一行 -->
        <!-- <input type="text" />
        <input type="text" />
        <span>尚硅谷</span>
        <span>尚硅谷</span> -->

        <!-- 规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写） -->
        <!-- <div>
            <span>尚硅谷1</span>
            <input type="text" />
            <div>尚硅谷2</div>
        </div> -->

        <!-- 规则2：行内元素中能写：行内元素 但不能写：块级元素 -->
        <!-- <span>
            <span>尚硅谷1</span>
            <input type="text" />
            <span>尚硅谷2</span>
            <div>尚硅谷3</div>
        </span>
        <span>尚硅谷4</span> -->

        <!-- 特殊规则：h1-h6不能互相嵌套 -->
        <!-- <h1>
            尚硅谷1
            <h2>尚硅谷2</h2>
        </h1> -->

        <!-- 特殊规则：p标签中不能写块元素 -->
        <!-- <p>
            <div>尚硅谷</div>
        </p> -->
    </body>
</html>
